<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>jQuery Google Charts Gui 1.0 - Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="lib/jquery-1.2.6.min.js" type="text/javascript"></script>
	<script src="lib/jquery.metadata.js" type="text/javascript"></script>
	<script src="lib/jquery-ui-personalized-1.6rc2.min.js" type="text/javascript"></script>
    <script src="lib/farbtastic/farbtastic.js" type="text/javascript"></script>
	<link href="lib/farbtastic/farbtastic.css" type="text/css" rel="stylesheet" />
		
	<script src="../../jgcharts.js" type="text/javascript"></script>
	<script src="../../plugins/jgtable/jgtable.js" type="text/javascript"></script>
	<script src="plugins/jggui/jggui.js" type="text/javascript"></script>
	<link href="plugins/jggui/jggui.css" type="text/css" rel="stylesheet" />
	<link href="plugins/jggui/theme/jquery-ui-themeroller.css" type="text/css" rel="stylesheet" />
	<script type="text/javascript">
		var STATIC = 0;
		jQuery(document).bind("jggui", function(){
			var _callback = function(){
				STATIC++;
				jQuery(".jgchart").remove();
				jQuery(".jgtable")
				.jgtable({
					single : STATIC,
					gui    : true
				});
			};
			_callback();
			
			jQuery("img.jggui").jggui({
				url : "plugins/jggui/",
				height : 400,
				width : 600,
				callback : _callback
			});
		});
		jQuery(document).ready(function(){
			jQuery(document).trigger("jggui");
		});
	</script>
</head>
<body>
<h1>Click on chart</h1>
<div class="jgtable {type : 'p',colors : ['5131C9'],size : '300x200'}">
<table class="demo">
  <thead>
    <tr>
        <th>Anno</th>

        <th class="serie">Data 1</th>
        <th class="serie">Data 2</th>
        <th class="serie">Data 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>

        <th class="serie">2001</th>
        <td>153</td>
        <td>60</td>
        <td>52</td>
    </tr>
    <tr>
        <th class="serie">2002</th>

        <td>113</td>
        <td>70</td>
        <td>60</td>
    </tr>
    <tr>
        <th class="serie">2003</th>
        <td>120</td>

        <td>80</td>
        <td>40</td>
    </tr>
  </tbody>
</table>
</div>
<div class="jgtable {type : 'bhg',bar_width : 15,grid : true,colors : ['5131C9'],size : '390x490'}">
<table class="demo">
  <thead>
    <tr>
        <th>Squadra</th>

        <th class="serie">Punti</th>
    </tr>
  </thead>
  <tbody>
    <tr><th class="serie">Inter</th><td>27</td></tr>
    <tr><th class="serie">Juventus</th><td>24</td></tr>
    <tr><th class="serie">Milan</th><td>23</td></tr>
    <tr><th class="serie">Napoli</th><td>23</td></tr>
    <tr><th class="serie">Lazio</th><td>22</td></tr>
    <tr><th class="serie">Udinese</th><td>21</td></tr>
    <tr><th class="serie">Genoa</th><td>20</td></tr>
    <tr><th class="serie">Fiorentina</th><td>20</td></tr>
    <tr><th class="serie">Catania</th><td>18</td></tr>
    <tr><th class="serie">Palermo</th><td>16</td></tr>
    <tr><th class="serie">Atalanta</th><td>14</td></tr>
    <tr><th class="serie">Lecce</th><td>12</td></tr>
    <tr><th class="serie">Siena</th><td>12</td></tr>
    <tr><th class="serie">Torino</th><td>11</td></tr>
    <tr><th class="serie">Cagliari</th><td>10</td></tr>
    <tr><th class="serie">Sampdoria</th><td>10</td></tr>
    <tr><th class="serie">Roma</th><td>8</td></tr>
    <tr><th class="serie">Bologna</th><td>7</td></tr>
    <tr><th class="serie">Chievo</th><td>6</td></tr>
    <tr><th class="serie">Reggina</th><td>5</td></tr>
  </tbody>
</table>
</div>
<div class="jgtable {
	type : 'bhg',
	bar_width : 19,
	bg : 'FFFFFF',
	bg_type : 'stripes',
	bg_offset : '7a7a7a',
	bg_angle : 45,
	bg_trasparency : 90,
	chbg : 'FFFFFF',
	chbg_type : 'gradient',
	chbg_offset : 'cb7e01',
	grid : true,
	grid_x : 3,
	grid_y : 3,
	grid_line : 2,
	grid_blank : 2,
	colors : ['5131C9','FFCC00','DA1B1B','FF9900','FF6600','CCFFFF','CCFF00','CCCCCC','FF99CC','999900','999999','66FF00','66CC00','669900','660099','33CC00','333399','000000','000000','000000'],
	size : '300x460'
}">
<table class="demo">
  <thead>
    <tr>
        <th>Squadra</th>
		<th class="serie">Inter</th>
	    <th class="serie">Juventus</th>
	    <th class="serie">Milan</th>
	    <th class="serie">Napoli</th>
	    <th class="serie">Lazio</th>
	    <th class="serie">Udinese</th>
	    <th class="serie">Genoa</th>
	    <th class="serie">Fiorentina</th>
	    <th class="serie">Catania</th>
	    <th class="serie">Palermo</th>
	    <th class="serie">Atalanta</th>
	    <th class="serie">Lecce</th>
	    <th class="serie">Siena</th>
	    <th class="serie">Torino</th>
	    <th class="serie">Cagliari</th>
	    <th class="serie">Sampdoria</th>
	    <th class="serie">Roma</th>
	    <th class="serie">Bologna</th>
	    <th class="serie">Chievo</th>
	    <th class="serie">Reggina</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    <th class="serie">Punti</th>
    <td>27</td>
    <td>24</td>
    <td>23</td>
    <td>23</td>
    <td>22</td>
    <td>21</td>
    <td>20</td>
    <td>20</td>
    <td>18</td>
    <td>16</td>
    <td>14</td>
    <td>12</td>
    <td>12</td>
    <td>11</td>
    <td>10</td>
    <td>10</td>
    <td>8</td>
    <td>7</td>
    <td>6</td>
    <td>5</td>
    </tr>
  </tbody>
</table>
</div>
<div class="jgtable {
	type : 'lc',
	size : '520x370',
	lines : [['1','0','0'],['1','0','0']],
	axis_step : 10,
	bg : '000000',
	bg_type : 'gradient',
	bg_offset : 'FFFFFF',
	bg_trasparency : 90,
	grid : true,
	grid_x : 4,
	grid_y : 4,
	grid_line : 2,
	grid_blank : 2,
	colors : ['5131C9','FFCC00'],
	filltop : ''
}">
<table>
<thead>
<tr>
    <th></th>
    <th class="serie">CA</th>
    <th class="serie">DF</th>
</tr>
</thead>
<tbody>
   <tr>
    <th class="serie">01-03</th>

    <td>105.7</td>
    <td>97.9</td>
  </tr>
  <tr>
    <th class="serie">02-03</th>
    <td>108.1</td>
    <td>101.6</td>

  </tr>
  <tr>
    <th class="serie">03-03</th>
    <td>110.7</td>
    <td>102.9</td>
  </tr>
  
  <tr>

    <th class="serie">04-03</th>
    <td>111.0</td>
    <td>93.7</td>
  </tr>
  <tr>
    <th class="serie">05-03</th>
    <td>110.0</td>

    <td>89.8</td>
  </tr>
  <tr>
    <th class="serie">06-03</th>
    <td>109.0</td>
    <td>90.7</td>
  </tr>

  <tr>
    <th class="serie">07-03</th>
    <td>107.5</td>
    <td>93.0</td>
  </tr>
  <tr>
    <th class="serie">08-03</th>

    <td>106.1</td>
    <td>94.5</td>
  </tr>
  <tr>
    <th class="serie">09-03</th>
    <td>104.3</td>
    <td>91.9</td>

  </tr>
  <tr>
    <th class="serie">10-03</th>
    <td>102.0</td>
    <td>93.9</td>
  </tr>
  <tr>

    <th class="serie">11-03</th>
    <td>102.8</td>
    <td>93.6</td>
  </tr>
  <tr>
    <th class="serie">12-03</th>
    <td>103.8</td>

    <td>92.6</td>
  </tr>
  
  <tr>
    <th class="serie">01-04</th>
    <td>102.9</td>
    <td>94.0</td>
  </tr>

  <tr>
    <th class="serie">02-04</th>
    <td>102.1</td>
    <td>92.7</td>
  </tr>
  <tr>
    <th class="serie">03-04</th>

    <td>100.6</td>
    <td>96.0</td>
  </tr>
  
 <tr>
    <th class="serie">04-04</th>
    <td>101.7</td>
    <td>97.9</td>

  </tr>
  <tr>
    <th class="serie">05-04</th>
    <td>101.8</td>
    <td>105.0</td>
  </tr>
  <tr>

    <th class="serie">06-04</th>
    <td>103.3</td>
    <td>104.1</td>
  </tr>
  <tr>
    <th class="serie">07-04</th>
    <td>104.0</td>

    <td>105.1</td>
  </tr>
  <tr>
    <th class="serie">08-04</th>
    <td>103.7</td>
    <td>108.1</td>
  </tr>

  <tr>
    <th class="serie">09-04</th>
    <td>108.4</td>
    <td>108.4</td>
  </tr>
  <tr>
    <th class="serie">10-04</th>

    <td>109.4</td>
    <td>113.8</td>
  </tr>
  <tr>
    <th class="serie">11-04</th>
    <td>112.0</td>
    <td>109.1</td>

  </tr>
  <tr>
    <th class="serie">12-04</th>
    <td>112.6</td>
    <td>106.3</td>
  </tr>
  <tr>

    <th class="serie">01-05</th>
    <td>115.5</td>
    <td>106.7</td>
  </tr>
  <tr>
    <th class="serie">02-05</th>
    <td>115.7</td>

    <td>108.8</td>
  </tr>
  <tr>
    <th class="serie">03-05</th>
    <td>114.7</td>
    <td>118.8</td>
  </tr>

  <tr>
    <th class="serie">04-05</th>
    <td>115.9</td>
    <td>120.4</td>
  </tr>
  <tr>
    <th class="serie">05-05</th>

    <td>116.2</td>
    <td>115.9</td>
  </tr>
  <tr>
    <th class="serie">06-05</th>
    <td>118.0</td>
    <td>124.7</td>

  </tr>
  <tr>
    <th class="serie">07-05</th>
    <td>123.3</td>
    <td>126.5</td>
  </tr>
  <tr>

    <th class="serie">08-05</th>
    <td>127.6</td>
    <td>131.6</td>
  </tr>
  <tr>
    <th class="serie">09-05</th>
    <td>130.3</td>

    <td>134.0</td>
  </tr>
  <tr>
    <th class="serie">10-05</th>
    <td>135.5</td>
    <td>135.7</td>
  </tr>

  <tr>
    <th class="serie">11-05</th>
    <td>138.2</td>
    <td>126.4</td>
  </tr>
  <tr>
    <th class="serie">12-05</th>

    <td>139.6</td>
    <td>127.4</td>
  </tr>
  <tr>
    <th class="serie">01-06</th>
    <td>145.1</td>
    <td>131.0</td>

  </tr>
  <tr>
    <th class="serie">02-06</th>
    <td>146.4</td>
    <td>129.9</td>
  </tr>
  <tr>

    <th class="serie">03-06</th>
    <td>147.1</td>
    <td>133.7</td>
  </tr>
  <tr>
    <th class="serie">04-06</th>
    <td>149.0</td>

    <td>138.4</td>
  </tr>
  <tr>
    <th class="serie">05-06</th>
    <td>150.3</td>
    <td>141.0</td>
  </tr>

  <tr>
    <th class="serie">06-06</th>
    <td>151.3</td>
    <td>139.3</td>
  </tr>
  <tr>
    <th class="serie">07-06</th>

    <td>153.4</td>
    <td>145.3</td>
  </tr>
  <tr>
    <th class="serie">08-06</th>
    <td>152.7</td>
    <td>142.9</td>

  </tr>
  <tr>
    <th class="serie">09-06</th>
    <td>152.9</td>
    <td>129.2</td>
  </tr>
  <tr>

    <th class="serie">10-06</th>
    <td>152.2</td>
    <td>126.0</td>
  </tr>
  <tr>
    <th class="serie">11-06</th>
    <td>151.9</td>

    <td>124.8</td>
  </tr>
  <tr>
    <th class="serie">12-06</th>
    <td>150.1</td>
    <td>125.9</td>
  </tr>

  <tr>
    <th class="serie">01-07</th>
    <td>148.2</td>
    <td>118.9</td>
  </tr>
  <tr>
    <th class="serie">02-07</th>

    <td>145.3</td>
    <td>122.9</td>
  </tr>
  <tr>
    <th class="serie">03-07</th>
    <td>142.9</td>
    <td>127.7</td>

  </tr>
  <tr>
    <th class="serie">04-07</th>
    <td>142.6</td>
    <td>134.4</td>
  </tr>
  <tr>

    <th class="serie">05-07</th>
    <td>144.0</td>
    <td>138.5</td>
  </tr>
  <tr>
    <th class="serie">06-07</th>
    <td>145.5</td>

    <td>138.7</td>
  </tr>
  <tr>
    <th class="serie">07-07</th>
    <td>147.2</td>
    <td>141.8</td>
  </tr>

  <tr>
    <th class="serie">08-07</th>
    <td>150.0</td>
    <td>139.2</td>
  </tr>
  <tr>
    <th class="serie">09-07</th>

    <td>153.8</td>
    <td>145.6</td>
  </tr>
  <tr>
    <th class="serie">10-07</th>
    <td>155.4</td>
    <td>147.6</td>

  </tr>
  <tr>
    <th class="serie">11-07</th>
    <td>157.0</td>
    <td>157.9</td>
  </tr>
  <tr>

    <th class="serie">12-07</th>
    <td>158.4</td>
    <td>156.2</td>
  </tr>
  <tr>
    <th class="serie">01-08</th>
    <td>162.8</td>

    <td>153.9</td>
  </tr>
  <tr>
    <th class="serie">02-08</th>
    <td>162.8</td>
    <td>158.6</td>
  </tr>

  <tr>
    <th class="serie">03-08</th>
    <td>164.7</td>
    <td>166.3</td>
  </tr>
  <tr>
    <th class="serie">04-08</th>

    <td>168.5</td>
    <td>165.8</td>
  </tr>
</tbody>
</table>
</div>
</body>
</html>  